<!doctype html>
<html lang="en" id="pass1">
  <head>
    <title>skip-link test</title>
    <meta charset="utf8" />
    <link
      rel="stylesheet"
      type="text/css"
      href="/node_modules/mocha/mocha.css"
    />
    <script src="/node_modules/mocha/mocha.js"></script>
    <script src="/node_modules/chai/chai.js"></script>
    <script src="/axe.js"></script>
    <style type="text/css">
      .sr-only {
        border: 0;
        clip: rect(0 0 0 0);
        clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
        -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        white-space: nowrap;
      }
    </style>
    <script>
      mocha.setup({
        timeout: 10000,
        ui: 'bdd'
      });
      var assert = chai.assert;
    </script>
  </head>
  <body>
    <div id="pass1-tgt"></div>
    <a href="#pass1-tgt" class="sr-only" id="pass1">Link</a>

    <a href="#pass2-tgt" style="position: absolute; left: -10000px" id="pass2"
      >Link</a
    >

    <div id="pass3-tgt"></div>
    <a href="/#pass3-tgt" class="sr-only" id="pass3">Link (angular)</a>

    <div id="canttell1-tgt" style="display: none"></div>
    <a href="#canttell1-tgt" class="sr-only" id="canttell1">Link</a>

    <!-- since these elements are page links, they needs to be at the bottom
       of the test so all the prior links are considered skip links -->
    <header>
      <ul>
        <li><a id="ignore1" href="/#about">About</a></li>
        <li><a id="ignore2" href="/#contact">Contact</a></li>
      </ul>
    </header>

    <h2 name="pass2-tgt">Heading</h2>

    <a href="foo#bar" id="ignore3">link</a>
    <a href="#" id="ignore4">link</a>
    <div id="mocha"></div>
    <script src="/test/testutils.js"></script>
    <script src="skip-link-pass.js"></script>
    <script src="/test/integration/adapter.js"></script>
  </body>
</html>
